<!DOCTYPE html>
<html lang="hr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>E-aplikacija elektronalog - Sidebar</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
  <!-- FontAwesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
  <style>
    body {
      background: linear-gradient(135deg, #e0f7fa, #80deea);
      font-family: 'Roboto', sans-serif;
      margin: 0;
      padding: 0;
    }
    /* Sidebar styling */
    .sidebar {
      height: 100vh;
      width: 250px;
      background: #343a40;
      color: #fff;
      position: fixed;
      top: 0;
      left: 0;
      overflow-y: auto;
      padding: 20px;
    }
    .sidebar h4 {
      text-align: center;
      margin-bottom: 20px;
      color: #fff;
    }
    .list-group-item {
      background: #343a40;
      color: #adb5bd;
      border: none;
    }
    .list-group-item:hover,
    .list-group-item:focus {
      background: #495057;
      color: #fff;
    }
    .list-group-item.active {
      background: #495057;
      color: #fff;
    }
    .pl-5 {
      padding-left: 2.5rem !important;
    }
    /* Main content styling */
    .content {
      margin-left: 270px; /* sidebar width + gap */
      padding: 30px;
    }
    .logo-container {
      text-align: center;
      margin-bottom: 30px;
    }
    .logo-container img {
      max-width: 400px;
      width: 100%;
      height: auto;
    }
    /* Sticky footer */
    footer {
      background: #f8f9fa;
      padding: 20px 0;
      position: fixed;
      width: calc(100% - 250px); /* adjust for sidebar width */
      bottom: 0;
      left: 250px;
      box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
      text-align: center;
    }
    /* Scroll-to-top button */
    #scrollTopBtn {
      position: fixed;
      bottom: 80px;
      right: 30px;
      display: none;
      z-index: 99;
    }
  </style>
</head>
<body>
  <!-- Sidebar -->
  <div class="sidebar">
    <h4>E-aplikacija</h4>
    <div class="list-group" id="sidebarAccordion">
      <!-- Vozila -->
      <a href="#vozilaCollapse" class="list-group-item list-group-item-action" data-toggle="collapse" aria-expanded="false" aria-controls="vozilaCollapse">
        <i class="fas fa-car"></i> Vozila
      </a>
      <div class="collapse" id="vozilaCollapse" data-parent="#sidebarAccordion">
        <a href="dodaj_vozilo.php" class="list-group-item list-group-item-action pl-5">Dodaj vozilo</a>
        <a href="lista_vozila.php" class="list-group-item list-group-item-action pl-5">Lista vozila</a>
      </div>
      <!-- Radnici -->
      <a href="#radniciCollapse" class="list-group-item list-group-item-action" data-toggle="collapse" aria-expanded="false" aria-controls="radniciCollapse">
        <i class="fas fa-users"></i> Radnici
      </a>
      <div class="collapse" id="radniciCollapse" data-parent="#sidebarAccordion">
        <a href="dodaj_radnika.php" class="list-group-item list-group-item-action pl-5">Dodaj radnika</a>
        <a href="lista_radnici.php" class="list-group-item list-group-item-action pl-5">Lista radnika</a>
      </div>
      <!-- Klijenti -->
      <a href="#klijentiCollapse" class="list-group-item list-group-item-action" data-toggle="collapse" aria-expanded="false" aria-controls="klijentiCollapse">
        <i class="fas fa-user"></i> Klijenti
      </a>
      <div class="collapse" id="klijentiCollapse" data-parent="#sidebarAccordion">
        <a href="dodaj_klijenta.php" class="list-group-item list-group-item-action pl-5">Dodaj klijenta</a>
        <a href="lista_klijenata.php" class="list-group-item list-group-item-action pl-5">Lista klijenata</a>
      </div>
      <!-- Grupe artikala -->
      <a href="#grupeCollapse" class="list-group-item list-group-item-action" data-toggle="collapse" aria-expanded="false" aria-controls="grupeCollapse">
        <i class="fas fa-layer-group"></i> Grupe artikala
      </a>
      <div class="collapse" id="grupeCollapse" data-parent="#sidebarAccordion">
        <a href="dodaj_grupu.php" class="list-group-item list-group-item-action pl-5">Dodaj grupu</a>
        <a href="lista_grupa.php" class="list-group-item list-group-item-action pl-5">Lista grupa</a>
      </div>
      <!-- Nalozi -->
      <a href="#naloziCollapse" class="list-group-item list-group-item-action" data-toggle="collapse" aria-expanded="false" aria-controls="naloziCollapse">
        <i class="fas fa-file-alt"></i> Nalozi
      </a>
      <div class="collapse" id="naloziCollapse" data-parent="#sidebarAccordion">
        <a href="dodaj_nalog.php" class="list-group-item list-group-item-action pl-5">Dodaj nalog</a>
        <a href="lista_naloga.php" class="list-group-item list-group-item-action pl-5">Lista naloga</a>
      </div>
      <!-- Dobavljači -->
      <a href="#dobavljaciCollapse" class="list-group-item list-group-item-action" data-toggle="collapse" aria-expanded="false" aria-controls="dobavljaciCollapse">
        <i class="fas fa-truck"></i> Dobavljači
      </a>
      <div class="collapse" id="dobavljaciCollapse" data-parent="#sidebarAccordion">
        <a href="unos_dobavljaca.php" class="list-group-item list-group-item-action pl-5">Unos dobavljača</a>
        <a href="lista_dobavljaca.php" class="list-group-item list-group-item-action pl-5">Lista dobavljača</a>
      </div>
      <!-- Ulaz artikala -->
      <a href="#ulazCollapse" class="list-group-item list-group-item-action" data-toggle="collapse" aria-expanded="false" aria-controls="ulazCollapse">
        <i class="fas fa-sign-in-alt"></i> Ulaz artikala
      </a>
      <div class="collapse" id="ulazCollapse" data-parent="#sidebarAccordion">
        <a href="ulaz.php" class="list-group-item list-group-item-action pl-5">Ulaz</a>
        <a href="ulaz_lista.php" class="list-group-item list-group-item-action pl-5">Ulaz lista</a>
      </div>
      <!-- Artikli -->
      <a href="#artikliCollapse" class="list-group-item list-group-item-action" data-toggle="collapse" aria-expanded="false" aria-controls="artikliCollapse">
        <i class="fas fa-box"></i> Artikli
      </a>
      <div class="collapse" id="artikliCollapse" data-parent="#sidebarAccordion">
        <a href="dodaj_artikal.php" class="list-group-item list-group-item-action pl-5">Dodaj artikal</a>
        <a href="lista_artikala.php" class="list-group-item list-group-item-action pl-5">Lista artikala</a>
      </div>
      <!-- Lager -->
      <a href="lista_lagera.php" class="list-group-item list-group-item-action">
        <i class="fas fa-warehouse"></i> Pregled lager liste artikala
      </a>
      <!-- Fakture -->
      <a href="#faktureCollapse" class="list-group-item list-group-item-action" data-toggle="collapse" aria-expanded="false" aria-controls="faktureCollapse">
        <i class="fas fa-file-invoice"></i> Fakture
      </a>
      <div class="collapse" id="faktureCollapse" data-parent="#sidebarAccordion">
        <a href="faktura_form.php" class="list-group-item list-group-item-action pl-5">Nova faktura</a>
        <a href="lista_faktura.php" class="list-group-item list-group-item-action pl-5">Lista faktura</a>
      </div>
      <!-- Nalog lista -->
      <a href="nalog_lista.php" class="list-group-item list-group-item-action">
        <i class="fas fa-list"></i> Nalog lista za dodavanje troskova
      </a>
      <!-- Admin -->
      <a href="#adminCollapse" class="list-group-item list-group-item-action" data-toggle="collapse" aria-expanded="false" aria-controls="adminCollapse">
        <i class="fas fa-user-shield"></i> Admin
      </a>
      <div class="collapse" id="adminCollapse" data-parent="#sidebarAccordion">
        <a href="admin_add_admin.html" class="list-group-item list-group-item-action pl-5">Dodaj admina</a>
        <a href="list_admin.php" class="list-group-item list-group-item-action pl-5">Lista admina</a>
      </div>
      <!-- Korisnici -->
      <a href="#korisniciCollapse" class="list-group-item list-group-item-action" data-toggle="collapse" aria-expanded="false" aria-controls="korisniciCollapse">
        <i class="fas fa-user"></i> Korisnici
      </a>
      <div class="collapse" id="korisniciCollapse" data-parent="#sidebarAccordion">
        <a href="admin_add_user.html" class="list-group-item list-group-item-action pl-5">Dodaj korisnika</a>
        <a href="list_users.php" class="list-group-item list-group-item-action pl-5">Lista korisnika</a>
      </div>
      <!-- Logout -->
      <a href="admin_logout.php" class="list-group-item list-group-item-action btn btn-danger mt-4">Odjava Admina</a>
    </div>
  </div>

  <!-- Glavni sadržaj -->
  <div class="content">
    <!-- Centrirani logo -->
    <div class="logo-container">
      <img src="logo.png" alt="Logo">
    </div>
    <h1 class="text-center">Dobro došli u E-aplikaciju elektronalog</h1>
    <!-- Ovdje možete dodati dodatni sadržaj po potrebi -->
  </div>

  <!-- Scroll-to-top Button -->
  <button id="scrollTopBtn" class="btn btn-primary"><i class="fas fa-arrow-up"></i></button>

  <!-- Sticky Footer -->
  <footer>
    <div class="container">
      <p class="mb-0">&copy; 2025 E-aplikacija elektronalog. Sva prava pridržana. Programmed and design Jasmin.J</p>
    </div>
  </footer>
  
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
  <script>
    // Scroll-to-top funkcionalnost
    var scrollTopBtn = document.getElementById("scrollTopBtn");
    window.onscroll = function() {
      if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
        scrollTopBtn.style.display = "block";
      } else {
        scrollTopBtn.style.display = "none";
      }
    };
    scrollTopBtn.addEventListener("click", function() {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    });
  </script>
</body>
</html>
